/**
 * @ignore
 * BEGIN HEADER
 *
 * Contains:        Generic CSS
 * CVM-Role:        CSS
 * Maintainer:      Hendrik Erz
 * License:         GNU GPL v3
 *
 * Description:     This file contains generic CSS for all platforms. NOTE:
 *                  This is likely going to fall prey to a refactor.
 *
 * END HEADER
 */

// Generic styles that apply to all platforms
body {
  label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .form-control {
    margin: 4px 0px;
    break-inside: avoid;

    input:not(.inline),
    select:not(.inline),
    textarea:not(.inline) {
      width: 100%;
      display: block;
    }
  }

  // Shows an input and a button side by side
  .input-button-group {
    display: flex;
    input {
      flex: 9;
      margin-right: 4px;
    }

    button {
      flex: 1;
    }
  }
}

body.darwin {
  fieldset {
    border: none;
    border-bottom: 1px solid rgb(210, 210, 210);

    &:last-child {
      border-bottom: none;
    }
  }

  // Generic inputs
  input, select, textarea, button {
    font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    background-color: white;
    border: 1px solid rgb(210, 210, 210);
    border-bottom-color: rgb(180, 180, 180);
    border-radius: 6px;
    padding: 2px 4px;
  }

  input[disabled] {
    background-color: #ebebeb;
  }

  &.dark {
    // Generic inputs
    input, select, textarea, button {
      color: rgb(215, 215, 215);
      border-color: transparent;
      background-color: rgb(85, 85, 85);
      border-top-color: rgb(100, 100, 100);
    }

    fieldset {
      border-bottom-color: rgb(50, 50, 50);
    }
  }
}

body.win32 {
  fieldset {
    border: none;
  }

  // Generic inputs
  input, select, textarea, button {
    background-color: white;
    border: 2px solid rgb(90, 90, 90);
    border-radius: 0px;
    padding: 8px 8px;
  }

  &.dark {
    input, select, textarea, button {
      background-color: rgb(90, 90, 90);
      color: white;
      border-color: rgb(120, 120, 120);
    }
  }
}

body.linux {
  fieldset {
    border: none;
  }

  input, select, textarea, button {
    border-radius: 4px;
    padding: 4px;
    border: 1px solid rgb(180, 180, 180);
  }

  button {
    background-color: rgb(230, 230, 230);
  }

  &.dark {
    input, select, textarea, button {
      background-color: rgb(90, 90, 90);
      color: white;
      border-color: rgb(120, 120, 120);
    }
  }
}
